import styled from "@emotion/styled";
import {Button, Form, Input, message, Modal, Space, Spin} from "antd";
import {CheckOutlined, PoweroffOutlined} from "@ant-design/icons";
import React, {useState} from "react";
import {createRole} from "@/api/role";
import {RoleCreateFormProp, RoleCreateModelProp} from "@/pages/authority/modules";

const CreateRoleModel: React.FC<RoleCreateModelProp> = ({visible, onCancel}) => {

    const [spinning, setSpinning] = useState<boolean>(false);
    const [form] = Form.useForm<RoleCreateFormProp>();

    const closeModel = () => {
        form.resetFields();
        onCancel(false);
    }

    const submitEnd = () => {
        form.validateFields().then( async value => {
            const result = await createRole(value);
            message.success(result);
            form.resetFields();
            onCancel(true);
        })
    }

    return <Container
        width='25vw'
        destroyOnClose
        maskClosable={false}
        onCancel={() => onCancel(false)}
        open={visible}
        title="创建角色"
        okText="保存"
        cancelText="取消"
        footer={
            <Space>
                <Button type="primary" danger onClick={closeModel} icon={<PoweroffOutlined />}>关闭</Button>
                <Button type="primary" onClick={submitEnd} icon={<CheckOutlined />}>保存</Button>
            </Space>
        }>
        <Spin tip="加载中......" spinning={spinning}>
            <Form labelCol={{ span: 5 }}
                  wrapperCol={{ span: 19 }}
                  form={form}
                  layout="horizontal"
                  name="form_in_modal"
            >
                <Form.Item name="name" label="角色名称" rules={[{ required: true, message: '请输入角色名称' }]}>
                    <Input placeholder="请输入角色名称" />
                </Form.Item>
                <Form.Item name="code" label="角色编码" rules={[{ required: true, message: '请输入角色鞭名马' }]}>
                    <Input placeholder="请输入角色编码" />
                </Form.Item>
                <Form.Item name="desc" label="角色描述">
                    <Input placeholder="请输入角色描述" />
                </Form.Item>
            </Form>
        </Spin>
    </Container>
}

const Container = styled(Modal)`
	.ant-modal-body {
		margin-top: 30px;
	}
`

export default CreateRoleModel;